<!--课程教学考勤-->
<template>
  <div class="app-page">
    <v-card>
      <v-container fluid grid-list-sm>
        <v-layout row wrap>
          <!-- 选择考勤课程 -->
          <v-flex xs12>
            <v-card flat>
              <v-card-title primary class="blue--text subheading">{{$route.query.selectRoom}}</v-card-title>
              <v-card-text
                style="margin-top:-1.8rem"
              >社会服务工程系-->幼儿教育专业-->{{$route.query.selectClass}}</v-card-text>
              <v-layout row wrap v-for="(item,i) of scheduleCard" :key="i">
                <v-flex d-flex xs12>
                  <v-card-title
                    primary
                    class="grey lighten-2"
                  >{{item.date+" "+item.week+" "+item.time}}</v-card-title>
                </v-flex>
                <v-flex xs12 v-for="(classItem,classIndex) of item.class" :key="classIndex">
                  <v-flex d-flex xs12>
                    <v-flex xs10>
                      <v-card-text>
                        <div>课 程：{{classItem.name}}</div>
                        <div>时 间：{{classItem.duration}}</div>
                        <div>教 师：{{classItem.teacher}}</div>
                      </v-card-text>
                    </v-flex>
                    <v-flex xs2 class="wy-remove-card-title">
                      <v-card-title @click="toSrc(classItem.name)">
                        <p class="blue--text">{{classItem.state}}</p>
                      </v-card-title>
                    </v-flex>
                  </v-flex>
                  <v-flex xs12>
                    <div class="wy-divider"></div>
                  </v-flex>
                </v-flex>
              </v-layout>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scheduleCard: [
        {
          date: "2018.09.10",
          week: "星期一",
          time: "上午",
          class: [
            {
              name: "学前儿童社会教育",
              duration: "8:30~9:20",
              teacher: "周蕙",
              state: "未考勤"
            },
            {
              name: "保教知识与能力",
              duration: "9:30~10:20",
              teacher: "周蕙",
              state: "未考勤"
            },
            {
              name: "计算机实践",
              duration: "10:30~11:20",
              teacher: "周蕙",
              state: "未考勤"
            },
            {
              name: "马克思理论",
              duration: "11:20~12:10",
              teacher: "周蕙",
              state: "未考勤"
            }
          ]
        },
        {
          date: "2018.09.10",
          week: "星期一",
          time: "下午",
          class: [
            {
              name: "钢琴弹唱",
              duration: "13:30~14:30",
              teacher: "周蕙",
              state: "未考勤"
            },
            {
              name: "舞蹈表演",
              duration: "15:30~17:30",
              teacher: "周蕙",
              state: "未考勤"
            }
          ]
        }
      ]
    };
  },
  methods: {
    toSrc(name) {
      let query = this.$route.query;
      query.head = name;
      this.$router.push({ path: "/outall/attendHandle", query });
    }
  }
};
</script>
<style lang='less' scoped>
@import "~@/common/css/appPage.less";
</style>